<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <meta charset="utf-8">
    <title>多功能计算</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="Layuimini/lib/layui-v2.6.3/css/layui.css"  media="all">
    <link rel="stylesheet" href="Layuimini/css/public.css" media="all">
    <link rel="stylesheet" href="Layuimini/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">

</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

       <!-- <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
            <legend>卡片风格的Tab</legend>
        </fieldset>-->

        <div class="layui-tab layui-tab-card">
            <ul class="layui-tab-title">
                <li class="layui-this">日期相差</li>
                <li>利息计算</li>
                <li>收益差计算</li>
                <li>收益率计算</li>
                <li>复利计算</li>
                <li>定投计算</li>
                <li>财务自由计算</li>
            </ul>
            <div class="layui-tab-content" style="height: 255px;">
                <div class="layui-tab-item layui-show">
                    <fieldset class="layui-elem-field">
                        <!--<legend>日期相差</legend>-->
                        <div class="layui-field-box" >
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">起始日期</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="startDate" id="startDate" autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-inline">
                                    <label class="layui-form-label">结束日期</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="endDate" id="endDate" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <br>
                                <br>
                                <br>
                            <div class="layui-form-item">
                                <button class="layui-btn layui-btn-primary layui-border-green" id="dateBtn" >计算提交</button>
                                <button class="layui-btn layui-btn-primary layui-border-orange" id="dateRest">数据重置</button>
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div class="layui-tab-item">
                    <fieldset class="layui-elem-field">
                        <!--<legend>利息计算</legend>-->
                        <div class="layui-field-box" >
                            <div class="layui-form-item">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">本金￥</label>
                                    <div class="layui-input-inline">
                                        <input type="text"  id ="lixiMoney" name="lixiMoney"  onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" lay-verify="required" placeholder="请输入本金金额（元）" autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">利率%</label>
                                    <div class="layui-input-inline">
                                        <input type="text"  id ="lixiInterest" name="lixiInterest"  onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" lay-verify="required" placeholder="请输入年利率（%）" autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">时间(天)</label>
                                    <div class="layui-input-inline">
                                        <input type="text"  id ="days" name="days"  onkeyup="value=value.replace(/[^\d]/g,'').replace(/^0{1,}/g,'')" lay-verify="required" placeholder="请输入时间（天）" autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <button class="layui-btn layui-btn-primary layui-border-green" id="lixiBtn" >计算提交</button>
                                    <button class="layui-btn layui-btn-primary layui-border-orange" id="lixiRest">数据重置</button>
                                </div>
                            </div>
                    </fieldset>

                </div>
                <div class="layui-tab-item">
                    <fieldset class="layui-elem-field">
                        <!--<legend>收益率差计算</legend>-->
                        <div class="layui-field-box" >
                            <div class="layui-form-item">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">本金￥</label>
                                    <div class="layui-input-inline">
                                        <input type="text"  id ="contrastmoney" name="contrastmoney"  onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" lay-verify="required" placeholder="请输入本金金额（元）" autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">初利率%</label>
                                    <div class="layui-input-inline">
                                        <input type="text"  id ="contrastinterest1" name="contrastinterest1"  onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" lay-verify="required" placeholder="请输入初年利率（%）" autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">终利率%</label>
                                    <div class="layui-input-inline">
                                        <input type="text"  id ="contrastinterest2" name="contrastinterest2"  onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" lay-verify="required" placeholder="请输入终年利率（%）" autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">时间(天)</label>
                                    <div class="layui-input-inline">
                                        <input type="text"  id ="contrastdays" name="contrastdays"  onkeyup="value=value.replace(/[^\d]/g,'').replace(/^0{1,}/g,'')" lay-verify="required" placeholder="请输入时间（天）" autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <button class="layui-btn layui-btn-primary layui-border-green" id="sylcBtn" >计算提交</button>
                                    <button class="layui-btn layui-btn-primary layui-border-orange" id="sylcRest">数据重置</button>
                                </div>
                            </div>
                    </fieldset>




                </div>
                <div class="layui-tab-item">

                    <fieldset class="layui-elem-field">
                        <!--<legend>收益率计算</legend>-->
                        <div class="layui-field-box" >
                            <div class="layui-form-item">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">本金￥</label>
                                    <div class="layui-input-inline">
                                        <input type="text"  id ="bjmoney" name="bjmoney"  onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" lay-verify="required" placeholder="请输入本金金额（元）" autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">收益金￥</label>
                                    <div class="layui-input-inline">
                                        <input type="text"  id ="sylmoney" name="sylmoney"  onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" lay-verify="required" placeholder="请输入收益金额（元）" autocomplete="off" class="layui-input">
                                    </div>
                                </div>



                                <div class="layui-form-item">
                                    <label class="layui-form-label">时间(天)</label>
                                    <div class="layui-input-inline">
                                        <input type="text"  id ="syldays" name="syldays"  onkeyup="value=value.replace(/[^\d]/g,'').replace(/^0{1,}/g,'')" lay-verify="required" placeholder="请输入时间（天）" autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <button class="layui-btn layui-btn-primary layui-border-green" id="sylBtn" >计算提交</button>
                                    <button class="layui-btn layui-btn-primary layui-border-orange" id="sylRest">数据重置</button>
                                </div>
                            </div>
                    </fieldset>


                </div>
                <div class="layui-tab-item">

                    <fieldset class="layui-elem-field">
                        <!--<legend>复利计算</legend>-->
                        <div class="layui-field-box" >
                            <div class="layui-form-item">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">本金￥</label>
                                    <div class="layui-input-inline">
                                        <input type="text"  id ="money" name="money"  onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" lay-verify="required" placeholder="请输入本金金额（元）" autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">复利利率%</label>
                                    <div class="layui-input-inline">
                                        <input type="text"  id ="interest" name="interest"  onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" lay-verify="required" placeholder="请输复利年利率（%）" autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">时间(年)</label>
                                    <div class="layui-input-inline">
                                        <input type="text"  id ="years" name="years"  onkeyup="value=value.replace(/[^\d]/g,'').replace(/^0{1,}/g,'')" lay-verify="required" placeholder="请输入时间（年）" autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <button class="layui-btn layui-btn-primary layui-border-green" id="flBtn" >计算提交</button>
                                    <button class="layui-btn layui-btn-primary layui-border-orange" id="flRest">数据重置</button>
                                </div>
                            </div>
                    </fieldset>

                </div>
                <div class="layui-tab-item">

                    <fieldset class="layui-elem-field">
                        <!--<legend>定投计算</legend>-->
                        <div class="layui-field-box" >
                            <div class="layui-form-item">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">定投金额￥</label>
                                    <div class="layui-input-inline">
                                        <input type="text"  id ="dongtoumoney" name="dongtoumoney"  onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" lay-verify="required" placeholder="请输入每月定投金额（元）" autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">定投利率%</label>
                                    <div class="layui-input-inline">
                                        <input type="text"  id ="dingtouinterest" name="dingtouinterest"  onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" lay-verify="required" placeholder="请输复利年利率（%）" autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">时间(年)</label>
                                    <div class="layui-input-inline">
                                        <input type="text"  id ="dingyears" name="dingyears"  onkeyup="value=value.replace(/[^\d]/g,'').replace(/^0{1,}/g,'')" lay-verify="required" placeholder="请输入时间（年）" autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <button class="layui-btn layui-btn-primary layui-border-green" id="dtBtn" >计算提交</button>
                                    <button class="layui-btn layui-btn-primary layui-border-orange" id="dtRest">数据重置</button>
                                </div>
                            </div>
                    </fieldset>

                </div>
                <div class="layui-tab-item">

                    <fieldset class="layui-elem-field">
                       <!-- <legend>计算结果</legend>-->
                        <div class="layui-field-box" >
                            <div class="layui-form-item">
                                <label class="layui-form-label">月消费￥</label>
                                <div class="layui-input-inline">
                                    <input type="text"  id ="freedom" name="freedom"  onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" lay-verify="required" placeholder="请输入每月消费额度（元）" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <br>
                            <br>
                            <div class="layui-form-item">
                                <button class="layui-btn layui-btn-primary layui-border-green" id="freeBtn">计算提交</button>
                                <button class="layui-btn layui-btn-primary layui-border-orange" id="freeRest">数据重置</button>
                                <button class="layui-btn layui-btn-primary layui-border-black" id="helpBtn">关于财务自由</button>
                            </div>
                        </div>
                    </fieldset>



                </div>
            </div>
        </div>
        <fieldset class="layui-elem-field" style="height: 100px;">
            <legend><i class="fa fa-calculator"></i>计算结果</legend>
            <div class="layui-field-box" >
            <p class="layui-btn layui-btn-lg" style="width: 220px" id="resultId"></p>
            </div>
        </fieldset>

    </div>
</div>
<script  src="jQuery/jquery-2.1.1.min.js" th:src="@{LightYear/js/jquery.min.js}" charset="utf-8"></script>
<script src="Layuimini/lib/layui-v2.6.3/layui.js" th:src="@{Layuimini/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{LightYear/layer/layer.js}" src="LightYear/layer/layer.js"></script>
<script src="copyJS/clipboard.min.js"></script>
<script>

    $("#resultId").click(function (){
        var  resulttext =$("#resultId").text();
        if(resulttext!=""){
            var clipboard = new Clipboard('#resultId', {
                text: function() {
                    return resulttext;
                }
            });
            layer.msg("复制成功!");
        }

    })









    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#startDate'
        });
        laydate.render({
            elem: '#endDate'
        });


        $("#dateBtn").click(function(){
            var startDate = $("input[name='startDate']").val();
            var endDate = $("input[name='endDate']").val();
            if(startDate==""){
                layer.tips("该值不能为空！","#startDate");
                return false;
            }
            if(endDate==""){
                layer.tips("该值不能为空！","#endDate");
                return false;
            }

            $.ajax({
                url:"getdays",
                type:"POST",
                data:{"startDate":startDate,"endDate":endDate},
                //data:$("#fulifrom form").serialize(),
                success:function(result){
                    $("#resultId").html("相差："+result+"天");
                }
            });
        })

        $("#dateRest").click(function(){
             $("input[name='startDate']").val("");
             $("input[name='endDate']").val("");
            $("#resultId").text("");
            $("#resultId").html("");

        })




    });



//利息计算

    $("#lixiBtn").click(function(){
        var lixiMoney = $("input[name='lixiMoney']").val();
        var lixiInterest = $("input[name='lixiInterest']").val();
        var days = $("input[name='days']").val();
        if(lixiMoney==""){
            layer.tips("本金不能为空！","#lixiMoney");
            return false;
        }
        if(lixiInterest==""){
            layer.tips("利率不能为空！","#lixiInterest");
            return false;
        }
        if(days==""){
            layer.tips("时间不能为空！","#days");
            return false;
        }

        $.ajax({
            url:"dailyInterest",
            type:"POST",
            data:{"lixiMoney":lixiMoney,"lixiInterest":lixiInterest,"days":days},
            //data:$("#fulifrom form").serialize(),
            success:function(result){
                $("#resultId").html("利息："+result+"元");
            }
        });
    })

    $("#lixiRest").click(function(){
        $("input[name='lixiMoney']").val("");
        $("input[name='lixiInterest']").val("");
        $("input[name='days']").val("");
        $("#resultId").html("");
    })

//收益率金额差计算
    $("#sylcBtn").click(function(){
        var contrastmoney = $("input[name='contrastmoney']").val();
        var contrastinterest1 = $("input[name='contrastinterest1']").val();
        var contrastinterest2 = $("input[name='contrastinterest2']").val();
        var contrastdays = $("input[name='contrastdays']").val();
        if(contrastmoney==""){
            layer.tips("本金不能为空！","#lixiMoney");
            return false;
        }
        if(contrastinterest1==""){
            layer.tips("初利率不能为空！","#contrastinterest1");
            return false;
        }
        if(contrastinterest2==""){
            layer.tips("终利率不能为空！","#contrastinterest2");
            return false;
        }
        if(contrastdays==""){
            layer.tips("时间不能为空！","#contrastdays");
            return false;
        }

        $.ajax({
            url:"contrastlixi",
            type:"POST",
            data:{"contrastmoney":contrastmoney,"contrastinterest1":contrastinterest1,"contrastinterest2":contrastinterest2,"contrastdays":contrastdays},
            success:function(result){
                $("#resultId").html("收益相差："+result+"元");
            }
        });
    })


    $("#sylcRest").click(function(){
        $("input[name='contrastmoney']").val("");
        $("input[name='contrastinterest1']").val("");
        $("input[name='contrastinterest2']").val("");
        $("input[name='contrastdays']").val("");
        $("#resultId").html("");
    })

//收益率计算
    $("#sylBtn").click(function(){
        var bjmoney = $("input[name='bjmoney']").val();
        var sylmoney = $("input[name='sylmoney']").val();
        var syldays = $("input[name='syldays']").val();
        if(bjmoney==""){
            layer.tips("本金不能为空！","#bjmoney");
            return false;
        }
        if(sylmoney==""){
            layer.tips("收益金额不能为空！","#sylmoney");
            return false;
        }

        if(syldays==""){
            layer.tips("时间不能为空！","#syldays");
            return false;
        }

        $.ajax({
            url:"shouyilv",
            type:"POST",
            data:{"bjmoney":bjmoney,"syldays":syldays,"sylmoney":sylmoney},
            success:function(result){

                $("#resultId").html("收益率："+result+"%");
            }
        });
    })


    $("#sylRest").click(function(){
        $("input[name='bjmoney']").val("");
        $("input[name='sylmoney']").val("");
        $("input[name='syldays']").val("");
        $("#resultId").html("");
    })
//复利计算

    $("#flBtn").click(function(){
        var money = $("input[name='money']").val();
        var interest = $("input[name='interest']").val();
        var years = $("input[name='years']").val();
        if(money==""){
            layer.tips("本金不能为空！","#money");
            return false;
        }
        if(interest==""){
            layer.tips("复利利率不能为空！","#interest");
            return false;
        }

        if(years==""){
            layer.tips("时间不能为空！","#years");
            return false;
        }

        $.ajax({
            url:"commandInterest",
            type:"POST",
            data:{"money":money,"interest":interest,"years":years},
            success:function(result){
                $("#resultId").html("最终收益："+result+"元");
            }
        });
    })

    $("#flRest").click(function(){
        $("input[name='money']").val("");
        $("input[name='interest']").val("");
        $("input[name='years']").val("");
        $("#resultId").html("");
    })
//定投计算
    $("#dtBtn").click(function(){
        var dongtoumoney = $("input[name='dongtoumoney']").val();
        var dingtouinterest = $("input[name='dingtouinterest']").val();
        var dingyears = $("input[name='dingyears']").val();
        if(dongtoumoney==""){
            layer.tips("本金不能为空！","#dongtoumoney");
            return false;
        }
        if(dingtouinterest==""){
            layer.tips("定投利率不能为空！","#dingtouinterest");
            return false;
        }

        if(dingyears==""){
            layer.tips("时间不能为空！","#dingyears");
            return false;
        }

        $.ajax({
            url:"dingtou",
            type:"POST",
            data:{"dongtoumoney":dongtoumoney,"dingtouinterest":dingtouinterest,"dingyears":dingyears},
            success:function(result){
               // console.log("返回值"+result)
                $("#resultId").html("最终收益："+result+"元");
            }
        });
    })

    $("#dtRest").click(function(){
        $("input[name='dongtoumoney']").val("");
        $("input[name='dingtouinterest']").val("");
        $("input[name='dingyears']").val("");
        $("#resultId").html("");
    })



//财务自由
        $("#freeBtn").click(function(){
            var freedomMoney = $("input[name='freedom']").val();
            if(freedomMoney==""){
                layer.tips("该值不能为空！","#freedom");
            }else{
               // layer.msg(freedomMoney);
                $.ajax({
                    url:"freedom",
                    type:"POST",
                    data:{"freedomMoney":freedomMoney},
                    //data:$("#fulifrom form").serialize(),
                    success:function(result){
                       // console.log("返回值"+result)
                        $("#resultId").html(result+"元");
                    }
                });

            }
        })
        $("#freeRest").click(function(){
          //  window.location.href="toCalcPage";
            $("input[name='freedom']").val("");
            $("#resultId").html("");
        })

        $("#helpBtn").click(function(){
          // layer.alert("关于财务自由！计算结果为M，则表示每年必须有M的额度，即该年实现了财务自由。");

            layer.msg('关于财务自由！计算结果为M，则表示每年必须有M的额度，即该年实现了财务自由。', {
                time: 20000, //20s后自动关闭
                btn: ['明白了']
            });


        })





</script>


</body>
</html>